<template>
    <Layout>
        <div class="navBar">
      <span>明细</span>
        </div>
      <ul class="tags">
        <li
          v-for="item in detailList"
          :key="item.creatAt?.toString()"
          class="tag">
          <span>类型：{{ item.type === "-" ? "支出" : "收入" }}</span>
          <span>标签：{{item.tags.map(item=>item.name).join(',')}}</span>
          <span>金额{{ item.type==='-'?'-':'+'  }}{{item.amount}}</span>
        </li>
      </ul>
      <div class="amount">
        <span>收入：{{ income }}</span>
        <span>支出：{{ spend }}</span>
      </div>
    </Layout>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import recordListModel from "@/models/recordListModel";
const recordList: RecordItem[] = recordListModel.fetch();
@Component
export default class Detail extends Vue {
  detailList = recordList;
  get income(){
    let total=0
      for (const item of this.detailList) {
          if(item.type=='+'){
              total += item.amount
          }
      }
      return total
  }
  get spend(){
    let total=0
      for (const item of this.detailList) {
          if(item.type=='-'){
              total += item.amount
          }
      }
      return total
  }
}
</script>

<style lang="scss" scoped>
.navBar{
  text-align: center;
  font-size: 16px;
  padding: 12px 16px;
  background-color: white;
  font-size: 18px;
}
.tags{
  background-color: white;
  font-size: 16px;
  padding-left: 16px;
  margin-top: 8px;
  height: 600px;
  overflow: auto;
  > li {
    padding: 20px;
    min-height: 44px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
}
}
.amount{
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 10px;
    span{
        bottom: 0;
        width: 49%;
        display: inline-block;
        height: 88px;
        background-color: white;
        text-align: center;
        font-size: 20px;
        line-height: 88px;
    }  
}

</style>
